<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    enablePullDownRefresh : true
  },
  anonymous: false
}
</route>

<script lang="ts" setup>
import { useAppStore, useUserStore } from '@/stores'
import ClassCard from '@/components/ClassCard.vue'
import ProPicker from '@/components/ProPicker.vue'
import YearTermPicker from '@/components/YearTermPicker.vue'
import type { ShopClassQuery, ShopClassResp } from '@/apis/shop'
import { listCampus } from '@/apis/common'
import { loginRoute } from '@/interceptors/route'
import { ShopApi } from '@/apis'

const { statusBarHeight, navBarHeight, menuButtonLeft, navAreaHeight } = useAppStore()
const userStore = useUserStore()
onShow(() => {
  if (!userStore.isLogin()) {
    uni.navigateTo({ url: loginRoute })
  }
})

// 搜索表单
const form = reactive<ShopClassQuery>({
  subject: 'math-xx',
  campusId: null,
  grade: 'grade1',
  term: null,
  classCategory: 1,
  keyword: null,
  studentId: userStore.currentStudent.id,
})

// const classList = ref<Array<ChooseListResp>>([])
const { reload, loadmore, records: classList, status, contentText } = usePagination(page => ShopApi.searchShopClass({ ...form, ...page }))
onReachBottom(() => {
  console.log('onReachBottom')
  loadmore()
})

onPullDownRefresh(async () => {
  console.log('onPullDownRefresh')
  await reload()
  uni.stopPullDownRefresh()
})

// 下拉刷新
const freshing = ref(false)
const refresherTriggered = ref<any>(false)
const onRefresherRefresh = async () => {
  if (freshing.value) {
    return
  }
  try {
    freshing.value = true
    refresherTriggered.value = true
    await reload()
  } finally {
    refresherTriggered.value = false
    freshing.value = false
  }
}

const onRefresherRestore = () => {
  refresherTriggered.value = false
}

const onScrollToLower = async () => {
  await loadmore()
}

const onClassCardClick = (target: ShopClassResp) => {
  const id = target.id
  // uni.setStorageSync('selectedClass', JSON.stringify(target))
  uni.navigateTo({ url: `/pages/shop/detail?id=${id}` })
}

// 过滤更多
const filterMoreShow = ref(false)
const openPopup = () => {
  filterMoreShow.value = true
}
const closePopup = () => {
  filterMoreShow.value = false
}

const cartItemCount = ref(0)
const getCardItemCount = async () => {
  cartItemCount.value = await ShopApi.getCardItemCount(userStore.currentStudent.id)
}

const campusList = ref([])
const getCampusList = async () => {
  campusList.value = await listCampus()
}

const gotoCart = () => {
  uni.navigateTo({
    url: '/pages/shop/cart/index',
  })
}

watch(form, () => {
  console.log('watch form: ', form)
  reload()
})

onLoad(() => {
  getCampusList()
  // reload()
})

onShow(() => {
  getCardItemCount()
})
</script>

<template>
  <image class="background" mode="widthFix" src="/static/images/banner-bg.png" :draggable="false" />
  <view class="relative px tab-page" :style="{ paddingTop: `${statusBarHeight}px` }">
    <view class="flex-row-start-center" :style="{ height: `${navBarHeight}px`, width: `${menuButtonLeft - 16}px` }">
      <view class="w-160rpx flex items-center overflow-hidden">
        <view class="flex-1 overflow-hidden">
          <ProPicker v-model="form.campusId" placeholder="校区" :options="campusList" />
        </view>
        <wd-icon name="arrow-down" />
      </view>

      <view class="flex-1">
        <wd-search v-model="form.keyword" :hide-cancel="true" :maxlength="10" placeholder="班级、老师关键字" @search="reload" />
      </view>
    </view>
    <view class="filter-panel w-full flex-row-between-center" style="height: 44px">
      <!--  年级 -->
      <view class="filter-tab-item flex-row-end-center flex-1">
        <ProPicker v-model="form.grade" code="Grade" placeholder="年级" />
        <wd-icon name="caret-down-small" size="22px" />
      </view>
      <!--  学期 -->
      <view class="filter-tab-item flex-row-end-center flex-1">
        <YearTermPicker v-model:class-year="form.classYear" v-model:term="form.term" placeholder="学期" />
        <wd-icon name="caret-down-small" size="22px" />
      </view>
      <!-- 科目 -->
      <view class="filter-tab-item flex-row-end-center flex-1">
        <ProPicker v-model="form.subject" code="Subject" placeholder="科目" />
        <wd-icon name="caret-down-small" size="22px" />
      </view>
      <!-- 班型 -->
      <view class="filter-tab-item flex-row-end-center flex-1">
        <ProPicker v-model="form.classCategory" code="ClassCategoryEnum" placeholder="班型" />
        <wd-icon name="caret-down-small" size="22px" />
      </view>
      <!-- 更多 -->
      <!-- <view class="flex-row-end-center flex-1" @click="openPopup">
        <text class="filter-tab-more mr-1">
          筛选
        </text>
        <wd-icon name="filter" />
      </view> -->
    </view>

    <scroll-view
      scroll-y="true"
      :style="{ height: `calc(100vh - ${navAreaHeight + 44}px )` }"
      refresher-enabled
      enable-back-to-top
      :refresher-triggered="refresherTriggered"
      @scrolltolower="onScrollToLower"
      @refresherrefresh="onRefresherRefresh"
      @refresherrestore="onRefresherRestore"
    >
      <view v-if="!classList || !classList.length" class="h-full bg-white">
        <wd-status-tip image="content" tip="暂无内容" />
      </view>
      <template v-else>
        <view v-for="(item, index) in classList" :key="index" class="mt-30rpx" @click="onClassCardClick(item)">
          <ClassCard :info="item" :show-enroll-time="true" />
        </view>
        <uni-load-more :status="status" :content-text="contentText" />
      </template>
    </scroll-view>
    <view class="cart flex-col-center-center" @click="gotoCart">
      <wd-badge v-model="cartItemCount" :top="5" :right="5">
        <image src="/static/images/cart.png" class="mt-1 h-60rpx w-60rpx" mode="aspectFill" />
      </wd-badge>
    </view>

    <wd-popup v-model="filterMoreShow" position="right" custom-style="width: 60%;">
      <view class="scroll-view flex flex-col bg-white">
        <view class="bg-white line-height-44px !pl-[32rpx]" :style="{ paddingTop: `${statusBarHeight}px` }" @click="closePopup">
          <wd-icon name="close" size="22px" />
        </view>
        <scroll-view class="flex-1 px-[32rpx]" scroll-y="true">
          <wd-status-tip image="content" tip="暂无内容" />
        </scroll-view>
      </view>
    </wd-popup>
  </view>
</template>

<style lang="scss" scoped>
  .background {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 0;
    height: 564rpx;
  }

  :deep(.wd-search) {
    --wot-search-input-bg: rgba(255, 255, 255, 0.7) !important;
    --wot-search-icon-color: #bfbfbf;
    background: transparent !important;
    padding: 0px 6px !important;
  }

  .cart {
    width: 92rpx;
    height: 92rpx;
    border-radius: 12rpx;
    background: #FFE4BA;
    position: fixed;
    /* #ifndef H5 */
    bottom: 60rpx;
    /* #endif */
    /* #ifdef H5 */
    bottom: 110rpx;
    /* #endif */
    right: 38rpx;
    z-index: 10;

    :deep(.wd-badge__content) {
      height: auto !important;
      line-height: auto !important;
      border: none !important;
    }
  }

  .filter-tab-more {
    position: relative;
    padding-left: 40rpx;
  }

  .filter-tab-more::before {
    content: "";
    width: 2px;
    height: 16px;
    position: absolute;
    top: 3px;
    left: 0;
    background: black;
  }

  .scroll-view {
    width: 100%;
    height: 100vh;
    flex: 1
  }
</style>
